const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const devMode = process.env.NODE_ENV !== "production"
const { VueLoaderPlugin } = require("vue-loader")
const path = require("path")
const WebpackBar = require('webpackbar');
const { DefinePlugin } = require('webpack');
const WebpackAutoImport = require('unplugin-auto-import/webpack')
module.exports = {
    entry: "./src/main.ts",
    cache: {
        type: "filesystem"
    },
    module: {
        rules: [
            {
                test: /\.(t|j)s$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true
                    }
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.vue$/,
                use: "vue-loader"
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                type: "asset",
                generator: {
                    filename: `assets/images/[name]-[hash][ext]`
                }
            },
            {
                test: /\.(eot|svg|ttf|woff2?|)$/,
                type: "asset/resource",
                generator: {
                    filename: "assets/fonts/[name]-[hash][ext]"
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "webpack5-ts-vue",
            template: "./public/index.html",
            // favicon:'./public/favicon.ico'
        }),
        
        new VueLoaderPlugin(),
        new DefinePlugin({
            BASE_URL: '"public/"'
        }),
       
        WebpackAutoImport({
            imports: ['vue'],
            // 配置Eslint
            eslintrc: {
                enabled:devMode, // Default `false`
                filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
                globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
              },
            dts:'./src/auto-imports.d.ts'
        }),
        new WebpackBar({
            color: "#85d",  // 默认green，进度条颜色支持HEX
            basic: false,   // 默认true，启用一个简单的日志报告器
            profile: false,  // 默认false，启用探查器。
        }),
       
    ],
    resolve: {
        // 配置省略.vue(webpack支持，ts不支持)
        extensions: [".vue",".js",".ts"],
        alias: {
            "@": path.resolve(__dirname, "../src")
        }
    },
  
}
